import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

import ECharts from '@kuiper-components/echarts';

import { percent } from '../../../../../common/formatter';
import s from './style.module.css';
import { WARNING_CATEGORY_KEY_LABEL_MAP } from '../../../../../common/constants';

const COLOR_MAP = {
	support: '#0AB272',
	n_support: '#FAAF2C',
};

const option = {
	title: {
		text: '合规状态',
		top: 'middle',
		left: 'center',
		textStyle: {
			fontSize: 12,
			fontWeight: 'normal',
		},
	},
	grid: {
		top: 0,
		right: 0,
		bottom: 0,
		left: 0,
	},
	tooltip: {
		confine: true,
		trigger: 'item',
		formatter: '{b} : {c} ({d}%)',
	},
	legend: {
		show: false,
		type: 'scroll',
		orient: 'vertical',
		left: '54%',
		top: 'middle',
		itemGap: 20,
		icon: 'circle',
		data: ['支持IPv6', '不支持IPv6'],
	},
	series: {
		type: 'pie',
		radius: ['65%', '80%'],
		center: ['50%', '50%'],
		label: {
			normal: {
				show: false,
				position: 'outside',
			},
			emphasis: {
				show: false,
				textStyle: {
					fontSize: '20',
					fontWeight: 'normal',
				},
			},
		},
		labelLine: {
			normal: {
				show: false,
			},
			emphasis: {
				show: false,
			},
		},
	},
};

function CountsPieChart({ data, total }) {
	option.title.text = `合规状态`;
	const optionData = [
		{
			name: '支持IPv6',
			value: data,
			itemStyle: {
				color: '#0AB272',
			},
		},
		{
			name: '不支持IPv6',
			value: total - data,
			itemStyle: {
				color: '#FAAF2C',
			},
		},
	];
	option.series.data = optionData;

	const percentMap = optionData.reduce((obj, { name, value }) => {
		obj[name] = percent(value / total || 0);
		return obj;
	}, {});
	option.legend.formatter = name => {
		return `${name}\n${optionData[name]}`;
	};

	return (
		<div className={cn(s.levelCount)}>
			<ECharts option={option} className={s.chart} key={JSON.stringify(data)} />
			<div className={s.legend}>
				<div className={s.item}>
					<span className={cn(s.icon, s.cryjack)}></span>
					<div className={s.info}>
						<div className={s.cate}>支持IPv6</div>
						<div>{percentMap['支持IPv6']}</div>
					</div>
				</div>
				<div className={s.item}>
					<span className={cn(s.icon, s.broken_links)}></span>
					<div className={s.info}>
						<div className={s.cate}>不支持IPv6</div>
						<div>{percentMap['不支持IPv6']}</div>
					</div>
				</div>
			</div>
		</div>
	);
}

CountsPieChart.propTypes = {
	className: PropTypes.string,
	total: PropTypes.number.isRequired,
	data: PropTypes.object,
};
CountsPieChart.defaultProps = {
	className: s.levelCount,
	total: 0,
	data: {},
};

export default CountsPieChart;
